@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3598568_m6681dzp56.css);
@function getvw($w) {
  @return ($w/750) * 100 + vw;
}
.warp {
  header {
    nav {
      display: flex;
      padding: getvw(17) getvw(23) getvw(9) getvw(23);
      align-items: center;
      justify-content: space-between;
      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: getvw(123);
        height: getvw(57);
        border: 1px solid orange;
        border-radius: getvw(20);
        position: relative;

        h4 {
          padding: 0 getvw(25);
          position: absolute;
        }
      }
      .area {
        position: relative;
        select {
          width: getvw(160);
          height: getvw(55);
          border: 1px solid #ff9344;
          appearance: none;
          padding-left: getvw(14);
        }
        i {
          font-size: getvw(30);
          color: #ff9344;
          position: absolute;
          right: getvw(11);
          top: 50%;
          transform: translateY(-50%);
          pointer-events: none;
        }
      }
    }
    .banner {
      
      display: flex;
      width: getvw(723);
      height: getvw(200);
      margin: getvw(30) auto;
      justify-content: space-evenly;
      .box1 {
        text-align: center;
        img {
          width: getvw(148);
          height: getvw(149);
        }
      }
    }
    .box2 {
      display: flex;
      width: getvw(98);
      height: getvw(18);
      margin: getvw(20) auto;
      .box3 {
        width: getvw(19);
        height: getvw(18);
        border: 1px solid#000;
        background-color: #ff9344;
        border-radius: getvw(50);
      }
    }
  }
  main {
    h4{
      display: flex;
          justify-content: center;
          align-items: center;
    }
    .boox {
      margin-top: getvw(30);
      .top1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: getvw(708);
        height: getvw(49);
        margin: 0 auto;
      }
      .top2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(40);
          font-weight: normal;
          color: #ff9344;
          padding-right: getvw(10);
        }
      }
      .top3 {
        display: flex;
        align-items: center;
        i {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .top4{
      display: flex;
      justify-content: space-between;
      margin-top: getvw(30);

      .sun{
        margin-right:  getvw(20);
        margin-left:  getvw(20);
        img{
          width:getvw(133) ;
          height: getvw(133);
          color: #ff9344;
        }
      }
    }
    .boox1{
      margin-top: getvw(50);
      .top1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: getvw(708);
        height: getvw(49);
        margin: 0 auto;
      }
      .top2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(40);
          font-weight: normal;
          color: #ff9344;
          padding-right: getvw(10);
        }
      }
      .top3 {
        display: flex;
        align-items: center;
        i {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .top4{
      display: flex;
      justify-content: space-between;

      .sun{
        margin-right:  getvw(20);
        margin-left:  getvw(20);
        img{
          width:getvw(133) ;
          height: getvw(133);
        }
      }
    }
    .boox2{
      margin-top: getvw(50);
      .top1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: getvw(708);
        height: getvw(49);
        margin: 0 auto;
      }
      .top2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(40);
          font-weight: normal;
          color: #ff9344;
          padding-right: getvw(10);
        }
      }
      .top3 {
        display: flex;
        align-items: center;
        i {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .top4{
      display: flex;
      justify-content: space-between;

      .sun{
        margin-right:  getvw(20);
        margin-left:  getvw(20);
        img{
          width:getvw(133) ;
          height: getvw(133);
        }
      }
    }
  }
  footer {
    position: fixed;
    margin-top: getvw(80);
    bottom: 0;
    width: 100%;
    background-color: aliceblue;
    .foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(708);
      height: getvw(120);
      margin-left: getvw(20);
      .font1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        p{
          a{
            color: black;
          }
        }
      }
      i {
        font-size: getvw(40);
        color: #ff9344;
      }
    }
  }
}
